<template>
	<view class="content">
		<view class="top">
			<view class="title">选择洗衣模式</view>
			<view class="number">
				<view>洗衣机</view>
				<view>{{ num }}</view>
			</view>
			<view class="clear"></view>
		</view>
		<view class="list">
			<view v-for="(item, index) in list" @tap="selectprice(index, item.price, item.time)"
				:class="indexcss == index ? 'item active' : 'item'">
				<view class="time"><text>{{ item.time }}</text>小时</view>
				<view class="price">{{ item.price }}元</view>
				<view class="price">{{ item.title }}</view>
			</view>
			<view class="clear"></view>
		</view>

		<view class="top">
			<view class="title">操作步骤</view>
			<view class="clear"></view>
		</view>
		<view class="list">
			<u-steps current="3" dot>
				<u-steps-item title="付款" desc="第一步"></u-steps-item>
				<u-steps-item title="打开仓门" desc="第二步"></u-steps-item>
				<u-steps-item title="放入衣物" desc="第三步"></u-steps-item>
				<u-steps-item title="关闭仓门" desc="第四步"></u-steps-item>
			</u-steps>
		</view>


		<view class="pay">
			<view class="price">
				￥{{ price }}.00
			</view>
			<view class="paybtn">
				<u-button type="primary" color="#23BF61" size="large" icon="weixin-fill" text="微信支付"
					@click="selectpay"></u-button>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" @close="close" :round="10">
			<view class="pattype">
				<view class="tit">选择支付方式</view>
				<view class="item">
					<radio-group @change="chang">
						<view class="radio">
							<view class="txt"><u-icon name="rmb-circle-fill" color="#23BF61"
									size="26"></u-icon><text>余额（剩余￥{{ uinfo.money }}）</text></view>
							<radio :value="1" :checked="1 == activeRadio" />
						</view>
						<view class="radio">
							<view class="txt"><u-icon name="weixin-circle-fill" color="#23BF61"
									size="26"></u-icon><text>微信支付</text></view>
							<radio :value="2" :checked="2 == activeRadio" />
						</view>
					</radio-group>
				</view>
				<view class="pay">
					<u-button type="primary" text="立即支付" icon="rmb-circle" color="#23BF61" size="normal"
						@click="pay"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 登陆组件 -->
		<com-login ref="login" @myevent="getuinfo"></com-login>
	</view>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex'
let that
export default {
	data() {
		return {
			id: '',
			num: 'A',
			detail: [],
			list: [{
				title: '普通模式',
				price: 10,
				time: '1'
			}, {
				title: '快速模式',
				price: 20,
				time: '0.5'
			}],
			price: 0,
			time: '',
			indexcss: -1,//选中下标
			show: false,
			activeRadio: '', //存的是单选按钮选中的value值
			uinfo: ''
		}
	},
	onLoad(e) {
		this.id = e.id
		this.num = e.num
	},
	onShow() {
		// this.getdetail()
	},
	mounted() {
		that = this
		this.uinfo = this.userInfo//store的全局变量
	},
	computed: {
		//引入store全局变量
		...mapState(['loginState', 'userInfo'])
	},
	methods: {
		//详情
		getdetail() {
			this.$http_api.dpcdetail({
				id: this.id
			}).then((res) => {
				that.detail = res
				that.list = res.czprice
				console.log(res)
			})
		},
		//选中价格
		selectprice(index, price, time) {
			this.indexcss = index
			this.price = price
			this.time = time
		},
		//选择支付方式
		selectpay() {
			//判断登陆状态
			if (!this.loginState) {
				this.$refs.login.openLogin()
				return
			}
			if (this.price == 0) {
				this.$u.toast('请选择充电时间');
			} else {
				this.show = true
			}
		},
		chang(e) {
			this.activeRadio = e.detail.value; //选中按钮的value值
		},
		//支付
		pay() {
			if (this.activeRadio == '') {
				this.$u.toast('请选择支付方式')

			} else if (this.activeRadio == 1) {
				//余额支付
				this.$http_api.dpcpay({
					uid: this.uinfo.id,
					id: this.id,//电站ID
					price: this.price,//支付价格
					type: this.activeRadio,//支付方式
					num: this.num,//插座号
					time: this.time//充电时长
				}).then((res) => {
					if (res.code == 1) {
						setTimeout(function () {
							uni.redirectTo({
								url: '/pages/order/order-detail'
							})
						}, 2000)
					}
				})
			} else {
				this.$u.toast('暂未开放微信支付')
			}
		},
		//关闭支付弹框
		close() {
			this.show = false
		},
		//登陆成功组件返回用户信息
		getuinfo(e) {
			this.uinfo = e
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 3%;
	box-sizing: border-box;
}

.top {
	padding-top: 50rpx;

	.title {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 20rpx;
		border-left: 2px solid #23BF61;
		line-height: 35rpx;
		float: left;
	}

	.number {
		float: right;
		display: flex;
		line-height: 45rpx;
		font-size: 28rpx;

		view:nth-child(1) {
			background: #000;
			color: #fff;
			padding: 0 10rpx;
		}

		view:nth-child(2) {
			background: #23BF61;
			color: #fff;
			padding: 0 10rpx;
		}
	}
}

.list {
	margin-top: 60rpx;

	.item {
		width: 31%;
		margin-right: 2%;
		float: left;
		text-align: center;
		border: 1px solid #999;
		padding: 25rpx 0;
		border-radius: 10rpx;

		.time {
			font-size: 28rpx;
			font-weight: bold;

			text {
				font-size: 48rpx;
			}
		}
	}

	.item.active {
		border: 1px solid #23BF61;

		.time {
			color: #23BF61;
		}

		.price {
			color: #23BF61;
		}
	}

	.item:nth-child(3n) {
		margin-right: 0;
	}
}

.pay {
	position: fixed;
	bottom: 3%;
	padding-top: 50rpx;
	border-top: 1px solid #dfdfdf;
	width: 94%;

	.price {
		float: left;
		font-size: 46rpx;
		color: #FF4040;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.paybtn {
		float: right
	}
}

.pattype {
	padding: 60rpx 3% 40rpx;

	.tit {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
		text-align: center;
	}

	.item {
		height: 280rpx;
	}

	.item .radio {
		display: block;
		margin-bottom: 20rpx;
		height: 60rpx;

		.txt {
			display: flex;
			float: left;

			text {
				margin-left: 20rpx;
			}
		}

		radio {
			float: right;
		}
	}

	.pay {
		margin: 50rpx 0;
	}
}
</style>